<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>

<th:block th:fragment="navbar">
 <div class="navbar-inner">
  <div class="container">

   <a class="brand" href="" th:href="@{home}" style="">
    <img src="" th:src="@{static/img/ff4j.png}" height="45px" width="70px" style="height:45px;margin-top:10px"/>
    &nbsp;<span th:text="#{navbar.title}" >Administration Console</span>
   </a>

   <div class="nav-collapse"  style="margin-top:15px">
   	<ul class="nav pull-right">
   	 <li>
   	  <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" style="margin-top:10px">
	   <input type="hidden" name="cmd" value="_s-xclick" />
	   <input type="hidden" name="hosted_button_id" value="XD2BQ9KDJ7SGU" />
	   <input type="image"
		  th:src="@{static/img/btn_donate_LG.gif}"
		  src="https://www.paypalobjects.com/en_GB/i/btn/btn_donate_LG.gif"
		  border="0" name="submit" alt="Donate to FF4J" />
		 <img alt="" border="0"
						src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1"
						th:src="@{static/img/pixel.gif}"/>
				 </form>
		</p>
     </li>

	 <li class="dropdown"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lang:</span></a></li>

	 <li class="dropdown">

	  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
	   <span th:if="${#locale.language == 'en'}">
	    <img src="" th:src="@{static/img/flags/flagEnglish.png}" style="height:25px" />
	   </span>
       <span th:if="${#locale.language == 'es'}">
	    <img src="" th:src="@{static/img/flags/flagSpain.png}" style="height:25px" />
	   </span>
	   <span th:if="${#locale.language == 'pt'}">
	    <img src="" th:src="@{static/img/flags/flagPortugal.png}" style="height:25px" />
	   </span>
	   <span th:if="${#locale.language == 'pt_br'}">
	    <img src="" th:src="@{static/img/flags/flagBrasil.png}" style="height:25px" />
	   </span>
	   <span th:if="${#locale.language == 'fr'}">
	    <img src="" th:src="@{static/img/flags/flagFrance.png}" style="height:25px" />
	   </span>
	   <span th:if="${#locale.language == 'de'}">
	    <img src="" th:src="@{static/img/flags/flagGermany.png}" style="height:25px" />
	   </span>
       <span th:if="${#locale.language == 'ja'}">
	    <img src="" th:src="@{static/img/flags/flagJapanese.png}" style="height:25px" />
	   </span>
	   <span th:if="${#locale.language == 'ar'}">
	    <img src="" th:src="@{static/img/flags/flagEmirate.png}" style="height:25px" />
	   </span>
	    <span th:if="${#locale.language == 'cn'}">
	    <img src="" th:src="@{static/img/flags/flagChina.png}" style="height:25px" />
	   </span>
	   <b class="caret"></b>
      </a>

      <ul class="dropdown-menu">
      	<li><a href="?lang=en"><img src="" th:src="@{static/img/flags/flagEnglish.png}" style="height:15px" />&nbsp;English</a></li>
        <li><a href="?lang=es"><img src="" th:src="@{static/img/flags/flagSpain.png}" style="height:15px" />&nbsp;Español</a></li>
        <li><a href="?lang=pt"><img src="" th:src="@{static/img/flags/flagPortugal.png}" style="height:15px" />&nbsp;Portugues</a></li>
        <li><a href="?lang=pt_br"><img src="" th:src="@{static/img/flags/flagBrasil.png}" style="height:15px" />&nbsp;Brasilian</a></li>
        <li><a href="?lang=fr"><img src="" th:src="@{static/img/flags/flagFrance.png}"  style="height:15px" />&nbsp;Français</a></li>
        <li><a href="?lang=de"><img src="" th:src="@{static/img/flags/flagGermany.png}" style="height:15px" />&nbsp;Deutsch</a></li>
        <li><a href="?lang=ja"><img src="" th:src="@{static/img/flags/flagJapanese.png}" style="height:15px" />&nbsp;日本語</a></li>
        <li><a href="?lang=cn"><img src="" th:src="@{static/img/flags/flagChina.png}" style="height:15px" />&nbsp;中文</a></li>
        <li><a href="?lang=ar"><img src="" th:src="@{static/img/flags/flagEmirate.png}" style="height:15px" />&nbsp;العربية‎</a></li>
      </ul>

	</li>

	</ul>
   </div>
  </div>
 </div>
</th:block>

<th:block th:fragment="subnavbar">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">

    <li class="active2">
     <a href="" th:href="@{home}" >
      <i class="icon-home"></i>
       <span th:text="#{navbar.main.home}" >Home</span>
     </a>
    </li>
    <li>
     <a href="" th:href="@{features}" >
      <i class="icon-check"></i>
      <span th:text="#{navbar.main.features}" >Features</span>
     </a>
    </li>
    <li>
     <a href="" th:href="@{properties}" >
      <i class="icon-list-alt"></i>
      <span th:text="#{navbar.main.properties}" >Properties</span>
     </a>
    </li>
        <li>
          <a href="" th:href="@{featureUsage}" >
           <i class="icon-dashboard"></i>
           <span th:text="#{navbar.main.supervision}" >FeatureUsage</span>
           </a>
        </li>
         <li>
          <a href="" th:href="@{settings}" >
           <i class="icon-cog"></i>
           <span th:text="#{navbar.main.settings}" >Settings</span>
           </a>
        </li>
         <li>
          <a href="" th:href="@{infos}" >
           <i class="icon-info"></i>
           <span th:text="#{navbar.main.about}" >About</span>
           </a>
        </li>
      </ul>

      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbarfeatures">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">
    <li>
     <a href="" th:href="@{home}" >
       <i class="icon-arrow-left"></i>
       <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
     <li class="active2">
     <a href="" th:href="@{features}" >
      <i class="icon-check"></i>
      <span th:text="#{navbar.main.features}" >Features</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-AddFlipDialog" data-toggle="modal" href="#modalCreate">
      <i class="icon-plus"></i>
      <span th:text="#{navbar.feature.new}" >New</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-copyFeatureDialog" data-toggle="modal" href="#modalCopyFeature">
      <i class="icon-copy"></i>
      <span th:text="#{navbar.feature.copy}" >Copy</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-renameFeatureDialog" data-toggle="modal" href="#modalRenameFeature">
      <i class="icon-random"></i>
      <span th:text="#{navbar.feature.rename}" >Rename</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-ToggleDialog" data-toggle="modal" href="#modalToggle">
      <i class="icon-adjust"></i>
      <span th:text="#{navbar.feature.togglegroup}" >Toggle Group</span>
     </a>
    </li>
    <li>
     <a href="" th:href="@{features}" >
      <i class="icon-refresh"></i>
      <span th:text="#{navbar.main.refresh}" >Refresh</span>
     </a>
    </li>
   </ul>
      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbarproperties">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">
    <li>
     <a href="" th:href="@{home}" >
       <i class="icon-arrow-left"></i>
      <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
    <li class="active2">
     <a href="" th:href="@{properties}" >
      <i class="icon-list-alt"></i>
      <span th:text="#{navbar.main.properties}" >Properties</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-createPropertyDialog" data-toggle="modal" href="#modalCreateProperty">
      <i class="icon-plus"></i>
      <span th:text="#{navbar.property.new}" >New</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-copyFeatureDialog" data-toggle="modal" href="#modalCopyProperty">
      <i class="icon-copy"></i>
      <span th:text="#{navbar.property.copy}" >Copy</span>
     </a>
    </li>
    <li th:if="${enableEdit}">
     <a class="open-renameFeatureDialog" data-toggle="modal" href="#modalRenameProperty">
      <i class="icon-random"></i>
      <span th:text="#{navbar.property.rename}" >Rename</span>
     </a>
    </li>
     <li>
     <a href="" th:href="@{properties}" >
      <i class="icon-refresh"></i>
      <span th:text="#{navbar.main.refresh}" >Refresh</span>
     </a>
    </li>
   </ul>
      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbarsupervision">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">
    <li>
     <a href="" th:href="@{home}" >
       <i class="icon-arrow-left"></i>
       <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
     <li class="active2">
      <a href="" th:href="@{featureUsage}" >
      <i class="icon-dashboard"></i>
      <span th:text="#{navbar.main.supervision}" >Dashboard</span>
      </a>
    </li>

    <li>
     <a href="" th:href="@{timeSeries}" >
      <i class="icon-bar-chart"></i>
      <span th:text="#{navbar.main.timeseries}" >TimeSeries</span>
     </a>
    </li>
     <li>
     <a href="" th:href="@{audit}" >
      <i class="icon-list-alt"></i>
      <span th:text="#{navbar.main.audit}" >Audit</span>
     </a>
    </li>
     <li>
     <a href="" th:href="@{featureUsage}" >
      <i class="icon-refresh"></i>
      <span th:text="#{navbar.main.refresh}" >Refresh</span>
     </a>
    </li>
   </ul>
      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbaraudit">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">
    <li>
     <a href="" th:href="@{home}" >
       <i class="icon-arrow-left"></i>
       <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
     <li >
      <a href="" th:href="@{featureUsage}" >
      <i class="icon-dashboard"></i>
      <span th:text="#{navbar.main.supervision}" >Dashboard</span>
      </a>
    </li>

    <li>
     <a href="" th:href="@{timeSeries}" >
      <i class="icon-bar-chart"></i>
      <span th:text="#{navbar.main.timeseries}" >TimeSeries</span>
     </a>
    </li>
     <li class="active2">
     <a href="" th:href="@{audit}" >
      <i class="icon-list-alt"></i>
      <span th:text="#{navbar.main.audit}" >Audit</span>
     </a>
    </li>
     <li>
     <a href="" th:href="@{audit}" >
      <i class="icon-refresh"></i>
      <span th:text="#{navbar.main.refresh}" >Refresh</span>
     </a>
    </li>
   </ul>
      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbartimeseries">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">
    <li>
     <a href="" th:href="@{home}" >
       <i class="icon-arrow-left"></i>
       <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
     <li >
      <a href="" th:href="@{featureUsage}" >
      <i class="icon-dashboard"></i>
      <span th:text="#{navbar.main.supervision}" >Dashboard</span>
      </a>
    </li>

    <li class="active2">
     <a href="" th:href="@{timeSeries}" >
      <i class="icon-bar-chart"></i>
      <span th:text="#{navbar.main.timeseries}" >TimeSeries</span>
     </a>
    </li>
     <li >
     <a href="" th:href="@{audit}" >
      <i class="icon-list-alt"></i>
      <span th:text="#{navbar.main.audit}" >Audit</span>
     </a>
    </li>
     <li>
     <a href="" th:href="@{timeSeries}" >
      <i class="icon-refresh"></i>
      <span th:text="#{navbar.main.refresh}" >Refresh</span>
     </a>
    </li>
   </ul>
      <div style="float:right;margin-top:20px;color:#687684">
       <span th:text="#{navbar.main.uptime}" >Uptime</span>
       <i class="icon-time"></i>: <span th:text="${uptime}">n/a</span>
      </div>
    </div>
  </div>
</th:block>

<th:block th:fragment="subnavbarback">
 <div class="subnavbar-inner">
  <div class="container">
   <ul class="mainnav">

    <li style="border-right:1px solid #CCCCCC">
     <a href="" th:href="@{home}" >
      <i class="icon-arrow-left"></i>
      <span th:text="#{navbar.main.back}" >Back</span>
     </a>
    </li>
    <li class="active2">
      <a href="" th:href="@{infos}" >
      <i class="icon-info"></i>
      <span th:text="#{navbar.main.about}" >About</span>
     </a>
    </li>

    </ul>

    </div>
  </div>
</th:block>

</body>
</html>